<template>
  <view class="list-item-bottom">
    <!-- <view class="order-price">
      <text>{{ $t("cart.total") }}</text>
      <text>￥</text>
      <text>{{ orderitem.pay_price | priceBeforeZero }}</text>
      <text>{{ orderitem.pay_price | priceAfterZero }}</text>
    </view> -->

    <!-- 底部按钮组 -->
    <!-- 暂时不做物流模块 -->
    <view class="order-operate-section">
      <template v-if="orderitem.trade_status != 1">
        <view
          v-if="orderitem.trade_status == 3"
          class="cancle-btn button-xl"
          @click.stop="handleDelete(orderitem.order_id)"
          >{{ $t("cart.delete") }}</view
        >
        <view
          class="cancle-btn button-xl"
          @click.stop="
            handleCancle(
              orderitem.order_id,
              operateBtnWord.greyStr,
              orderitem.is_pay,
              orderitem.is_delivery,
              orderitem.goods_list
            )
          "
          v-if="operateBtnWord.greyStr"
          >{{ operateBtnWord.greyStr }}</view
        >
        <template v-if="orderitem.is_can_confirm">
          <view
            class="confirm-btn button-xl"
            v-if="
              operateBtnWord.redStr && operateBtnWord.redStr != $t('order.warn')
            "
            @click.stop="
              handleConfirm(orderitem.order_id, operateBtnWord.redStr)
            "
            >{{ operateBtnWord.redStr }}</view
          >
        </template>
      </template>
      <template v-else>
        <view
          class="cancle-btn button-xl"
          @click.stop="handleDelete(orderitem.order_id)"
          >{{ $t("cart.delete") }}</view
        >
      </template>
    </view>

    <view class="list-item-bottom-list">
      <template
        v-if="
          orderitem.order_type == 0 &&
          orderitem.is_delivery == 0 &&
          orderitem.is_offline == 0 &&
          orderitem.express_detail.list.length > 0
        "
      >
        <view class="item-bottom-list-one" @click.stop="gotoExpress"
          >物流查询</view
        >
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    operateBtnWord() {
      let redStr = "",
        greyStr = "";
      if (this.orderitem.is_pay == 0 && this.orderitem.pay_type != 2) {
        if (this.orderitem.apply_delete == 1) {
          greyStr =
            this.orderitem.trade_status == 1
              ? this.$t("shop.cancled")
              : this.$t("shop.applying");
        } else if (this.orderitem.trade_status == 1) {
          greyStr = this.$t("person.cancle");
        } else {
          redStr = this.$t("order.toPay");
          greyStr = this.$t("person.cancle");
        }
      }

      if (
        (this.orderitem.is_pay == 1 || this.orderitem.pay_type == 2) &&
        this.orderitem.trade_status == 0
      ) {
        if (this.orderitem.apply_delete == 1) {
          greyStr =
            this.orderitem.trade_status == 1
              ? this.$t("shop.cancled")
              : this.$t("shop.applying");
        } else {
          redStr = this.$t("order.warn");
          greyStr = this.$t("order.cancleOrder");
        }
      }

      if (this.orderitem.trade_status == 2) {
        redStr = this.$t("shop.confirm");
        //   核销码
      }

      if (this.orderitem.trade_status == 3) {
        redStr = this.$t("order.buyAgain");
        if (
          this.orderitem.order_refund_enable == 1 &&
          this.orderitem.is_order_refund == 0
        ) {
          greyStr = this.$t("title.orderRefundList");
        } else {
          greyStr = "";
        }
      }

      // 虚拟商品无再次购买，售后
      if (
        this.orderitem.order_type == 4 ||
        this.orderitem.order_type == 3 ||
        this.orderitem.order_type == 7
      ) {
        if (greyStr == this.$t("title.orderRefundList")) greyStr = "";
        if (
          redStr == this.$t("order.buyAgain") ||
          redStr == this.$t("order.warn")
        )
          redStr = "";
      }

      return { redStr, greyStr };
    }
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    }
  },
  methods: {
    handleCancle(id, type, is_pay, is_delivery, goods_list) {
      this.$emit("handleCancle", { id, type, is_pay, is_delivery, goods_list });
    },
    handleConfirm(id, type) {
      this.$emit("handleConfirm", { id, type, item: this.orderitem });
    },
    handleDelete(id) {
      this.$emit("handleDelete", { id, item: this.orderitem });
    },
    gotoExpress() {
      try {
        let data = {
          ...this.orderitem.express_detail,
          express: this.orderitem.express,
          express_no: this.orderitem.express_no
        };
        uni.setStorageSync("expressInfo", JSON.stringify(data));
      } catch (e) {
        // error
      }
      this.$utils.toUrl(`/user/express/express`, "navigate");
    }
  }
};
</script>

<style lang="scss" scoped>
.list-item-bottom {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .order-price {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #262626;
    line-height: 44rpx;
    display: flex;
    align-items: baseline;

    text:nth-child(2) {
      font-size: 24rpx;
    }
    text:nth-child(3) {
      font-size: 30rpx;
    }
    text:nth-child(4) {
      font-size: 24rpx;
    }
  }

  .order-operate-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .button-xl {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      width: 152rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30rpx;
    }

    .cancle-btn {
      color: #262626;
      border: 2rpx solid #8c8c8c;
      margin-left: 24rpx;
    }

    .confirm-btn {
      color: #f7271f;
      border: 2rpx solid #f7271f;
      margin-left: 24rpx;
    }
  }

  .list-item-bottom-list {
    display: flex;
    justify-content: flex-end;

    view {
      width: 152rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 22rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
    }

    navigator {
      width: 152rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 22rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
    }

    .item-bottom-list-one {
      border: 1rpx solid #8e8e8e;
      color: #262626;
    }

    .item-bottom-list-two {
      color: #f22a10;
      border: 1rpx solid #f22a10;
    }
  }
}
</style>
